<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <!--如果是IE 就以标准渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <!-- 视窗——————响应式布局 -->
    <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes,minimum-scale=0.5" /> -->
    <meta name='viewport' content='width=device-width,initial-scale=1.0,minimum-scale=0.5, maximum-scale=5.0' />

    <!--当前页面的三要素-->
    <title>运维系统</title>
    <meta name="description" content="聚能优电" />
    <meta http-equiv="keywords" content="聚能优电" />
    <script type="text/javascript" src="../js/verify.js"></script>
    <script type="text/javascript" src="../js/common/commonfuntion.js"></script>
    <!-- css -->
    <link rel="stylesheet" type="text/css" href="../css/common/common.css" />
    <link rel="stylesheet" type="text/css" href="../css/jquery-accordion-menu.css" />
    <link rel="stylesheet" type="text/css" href="../css/assetsdetail.css" />
    <link rel="stylesheet" type="text/css" href="../css/ywzt.css" />
    <style>
        .formbody .layoutmap .pcontent .ptitle{width:auto;}
        .mainmonitor_sz_screen .m_content{
            margin-top: 1.55rem;
            width: 100%;
            position:none;
        }
        .mainmonitor_sz_screen .m_content .khfxWarp{top:0;}

        .mainmonitor_sz_screen .lzxx_tit{
            margin-top:0.8rem;
            font-family: SourceHanSansCN-Bold;
            font-size: 14px;
            color: #7F94B2;
            letter-spacing: 1px;
            font-weight: 700;
        }

        /* 表格部分 */
        table {
            margin-top: 0.3rem;
            width: 100%;
            font-size: 0.25rem;
            color: #becadc;
        }

        table thead tr{
            /* font-size: 0.3rem; */
            height:20px;
            font-family: MicrosoftYaHei;
            font-size: 12px;
            color: #435A7A;
            letter-spacing: 0.75px;
            font-weight: 400;
            
        }
        table tbody tr td{
            height:25px;
            line-height:25px;
            font-family: MicrosoftYaHei;
            font-size: 12px;
            color: #CDDDF3;
            letter-spacing: 0.75px;
            font-weight: 400;
        }

        table tbody tr td:nth-child(1){
            width:36%;
        }
        table tbody tr td:nth-child(2){
            width:24%;
        }

        table tbody tr td:nth-child(3){
            width:24%;
        }
        table tbody tr td:nth-child(4){
            width:16%;
        }

    </style>
</head>

<body>
    <div id="container" class="mainmonitor_sz">
        <div class="mainmonitor_sz_01">
            <!--主屏内容-->
            <div class="mainmonitor_sz_screen">
                <div class="m_title">
                    <a href="JavaScript:history.go(-1);" class="back">
                        <img src="../images/back.svg" alt="" />
                    </a>
                    <span class="tit" id="projectNameCN">资产登记</span>
                </div>
                <div class="m_content">
                    <article class="khfxWarp khfxWarpaa" id="khfxWarp" style="background: #112957;box-shadow: 0 6px 12px 0 rgba(0,16,40,0.33);border-radius: 4px;padding:5px 0 10px 0;">
                        <div class="khfxPane xmzt khfxPaneaa" id="firstkhfxPane">
                            <div class="zt1 ztdetail firstdetail">
                                <div class="tit_tit">
                                    <img src="../images/titicon.svg" alt="" />
                                    <span>项目总览</span>
                                </div>
                                <ul>
                                    <li>
                                        <p>设备名称</p>
                                        <div class="ztdiv">
                                            <span id="sbmc"></span>

                                        </div>
                                    </li>
                                    <li>
                                        <p>设备型号</p>
                                        <div class="ztdiv">
                                            <span id="sbxh"></span>
                                        </div>
                                    </li>
                                </ul>
                                <ul>
                                    <li>
                                        <p>物联卡号</p>
                                        <div class="ztdiv">
                                            <span id="wlkh"></span>

                                        </div>
                                    </li>
                                    <li>
                                        <p>制造日期</p>
                                        <div class="ztdiv">
                                            <span id="zzrq"></span>

                                        </div>
                                    </li>
                                </ul>
                                
                                <ul>
                                    <li>
                                        <p>向日葵号</p>
                                        <div class="ztdiv">
                                            <span id="xrkh"></span>
                                        </div>
                                    </li>
                                    <li>
                                        <p>状态</p>
                                        <div class="ztdiv">
                                            <span id="xszt"></span>

                                        </div>
                                    </li>
                                    
                                </ul>
                                <ul>
                                    
                                    <li>
                                        <p>设备编号</p>
                                        <div class="ztdiv">
                                            <span id="sbbh"></span>
                                        </div>
                                    </li>
                                </ul>
                                <ul>
                                    <li>
                                        <p>所属项目</p>
                                        <div class="ztdiv">
                                            <span id="ssxm" style="overflow: hidden;
                                            white-space: nowrap;
                                            text-overflow: ellipsis;"></span>
                                        </div>
                                    </li>
                                    
                                </ul>
                            </div>
                        </div>
                    </article>


                </div>


                <div class="lzxx_tit">流转信息</div>
                <table>
                    <thead>
                        <tr>
                            <td>项目(仓库)</td>
                            <td>入库时间</td>
                            <td>出库时间</td>
                            <td>记录人</td>
                        </tr>
                    </thead>

                
                    <tbody id="bodycon">
                        
                        <!-- <tr>
                            <td>1</td>
                            <td>22</td>
                            <td>项目名称dfgdfsg</td>
                            <td>东风浩荡发货单费</td>
                        </tr> -->

                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script>
        (function (win, doc) {
            var docEl = doc.documentElement || document.body; //获取HTML标签

            var container = doc.getElementById("container"); //container元素
            //判断是移动端设备还是PC,移动 就采用'orientationchange',横竖屏事件，PC端就采用onresize，窗口改变时间
            var resize =
                "onorientationchange" in win ? "orientationchange" : "resize";

            function rem() {
                docEl.style.fontSize = 100 * (container.clientWidth / 750) + "px";
            }

            //监听'DOMContent事件:DOM加载完成执行,如果DOMContent事件，那么执行rem函数
            doc.addEventListener("DOMContentLoaded", rem, false);

            //win下监听resize事件,如果resize事件，那么执行rem函数
            win.addEventListener(resize, rem, false);
        })(window, document);
    </script>
    <!-- js -->
    <script type="text/javascript" src="../js/jquery-3.4.1.js"></script>


    <script>
        $(document).ready(function () {

            var theid = GetQueryString('id');


            // 请求设备详细信息
            $.ajax({
                type: "GET",
                dataType: "json",
                url: "http://112.74.169.99:21021/api/services/app/AssetService/GetAssetInfoByID?id=" + theid,
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("Accept", "application/json, text/javascript, */*; q=0.01");
                    xhr.setRequestHeader("Authorization", accessToken);
                    xhr.setRequestHeader('.AspNetCore.Culture', 'zh-Hans');
                },
                success: function (res) {

                    var data = res.result;
                    console.log(data);
                    if(data.devicestate == 1){
                        data.devicestate = '闲置';
                    }else if(data.devicestate == 2){
                        data.devicestate = '运行';
                    }else if(data.devicestate == 3){
                        data.devicestate = '故障';
                    }else if(data.devicestate == 4){
                        data.devicestate = '报废';
                    }
                    
                    $("#sbmc").html(data.devCN);//设备名称
                    $("#sbxh").html(data.deviceType);//设备型号
                    $("#sbbh").html(data.deviceCode);//设备编号
                    $("#zzrq").html( (data.creatTime).substring(0,10) );//制造日期
                    $("#xrkh").html(data.xrkid);//向日葵号
                    $("#wlkh").html(data.cardID);//物联卡号
                    $("#ssxm").html(data.projectName);//所属项目
                    $("#xszt").html(data.devicestate);//状态
                },
                error: function (err) {
                    console.log("设备资产信息请求失败");
                }
            });

            // 请求设备的流转信息
            $.ajax({
                type: "GET",
                dataType: "json",
                url: "http://112.74.169.99:21021/api/services/app/AssetService/GetCirculationByAssetID?id=" + theid,
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("Accept", "application/json, text/javascript, */*; q=0.01");
                    xhr.setRequestHeader("Authorization", accessToken);
                    xhr.setRequestHeader('.AspNetCore.Culture', 'zh-Hans');
                },
                success: function (res) {
                    console.log(res);
                    $("#bodycon").html(` `);
                    $("#bodycon").html(eachdata(res.result));
                    return;
                    
                },
                error: function (err) {
                    console.log("流转信息请求失败");
                }
            });

            // 遍历流转信息数据
            function eachdata(obj) {
                var str = '';
                if (obj.constructor == Array) {
                    for (var i = 0, len = obj.length; i < len; i++) {
                        str += `
                            <tr>
                                <td>` + obj[i].projectName + `</td>
                                <td>` + (obj[i].putInTime).substring(0,10) + `</td>
                                <td>` + (obj[i].outTime).substring(0,10) + `</td>
                                <td>` + obj[i].userName + `</td>
                            </tr>
                        `;

                    }
                    return str;
                }
            }





        });
    </script>
</body>

</html>